import React, { Component } from 'react';
import { Card, Tabs, Form, Row, Col, Button, Select, DatePicker } from 'antd';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { handlerMatomoEvent } from '@/utils/matomo';
import router from 'umi/router';
import _ from 'lodash';
import moment from 'moment';
import styles from '../../index.less';
import PageTop from './components/PageTop';
import Remind from './components/Remind';
import Dynamic from './components/Dynamic';

const { TabPane } = Tabs;
const { Option } = Select;
const { RangePicker } = DatePicker;

@connect(state => ({
  businessType: state.Workbench.businessType, // 业务类型(下拉框)
  event: state.Workbench.event, // 事件(下拉框)
  operationBy: state.Workbench.operationBy, // 操作人(下拉框)
  stages: state.Workbench.stages, // 显示分期(下拉框)
  todoType: state.Workbench.todoType, // 显示门户待办类型(下拉框)
  versionType: state.Workbench.versionType, // 版本类型(下拉框)
  remindParams: state.Workbench.remindParams, // 待办提醒的筛选id
  remindItems: state.Workbench.remindItems, // 待办提醒的数据
  dynamicItems: state.Workbench.dynamicItems, // 最新动态的数据
  dynamicParams: state.Workbench.dynamicParams, // 最新动态的筛选id
  remindLoading: state.Workbench.remindLoading,
  dynamicLoading: state.Workbench.dynamicLoading,
}))
@Form.create()
export default class index extends Component {
  state = {
    formState: false,
    euginItem: [],
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { projectId } = location.query;
    dispatch({
      type: 'Workbench/requestSelectData',
      payload: {
        params: { projectId },
      },
    });
    {
      const params = {
        projectId,
        current: '1',
        pageSize: '20',
        stagesId: '',
        state: '',
        typeId: '',
      };
      dispatch({
        type: 'Workbench/requestRemindData',
        payload: {
          params,
        },
      });
    }
    {
      const params = {
        projectId,
        current: '1',
        pageSize: '20',
        begin: '',
        end: '',
        eventId: '',
        moduleTypeId: '',
        operationBy: '',
        stagesId: '',
        typeId: '',
      };
      dispatch({
        type: 'Workbench/requestDynamicData',
        payload: {
          params,
        },
      });
    }
    // 工作台-项目-详情
    const params = {
      category: 'Page',
      action: '工作台-项目-详情',
      name: '工作台-项目-详情',
    };
    handlerMatomoEvent(params);
  }

  handleFormState = state => {
    this.setState({
      formState: state,
    });
  };

  // 重置查询条件
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  // 根据查询条件搜索
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form, dynamicParams } = this.props;
    const { event, businessType, versionType, operationBy } = form.getFieldsValue();
    const rangeTimeValue = form.getFieldsValue()['range-picker'];
    const begin = rangeTimeValue ? rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss') : '';
    const end = rangeTimeValue ? rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss') : '';
    const params = {
      ...dynamicParams,
      begin,
      end,
      eventId: event || '',
      moduleTypeId: businessType || '',
      operationBy: operationBy || '',
      versionType: versionType || '',
    };
    dispatch({
      type: 'Workbench/requestDynamicData',
      payload: {
        params,
      },
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { businessType, event, operationBy, versionType } = this.props;
    const { formState } = this.state;
    return (
      <div className={styles.workbench}>
        <PageHeaderWrapper
          breadcrumb={null}
          title={unescape(this.props.location.query.projectName)}
        >
          <div className="detail">
            <Card>
              <Tabs
                activeKey={this.props.location.query.tabKey}
                onChange={activeKey => {
                  router.push({
                    pathname: '/Workbench/projectWorkbench/detail',
                    query: {
                      tabKey: activeKey,
                      projectName: this.props.location.query.projectName,
                      projectId: this.props.location.query.projectId,
                    },
                  });
                }}
                tabBarExtraContent={<PageTop {...this.props} formState={this.handleFormState} />}
              >
                <TabPane tab="待办提醒" key="remind">
                  <Remind {...this.props} />
                </TabPane>
                <TabPane tab="最新动态" key="dynamic">
                  <div className="crar-content">
                    {formState ? (
                      <Form onSubmit={this.handleSearch} layout="inline" className="forms">
                        <Row type="flex" justify="space-between" align="middle">
                          <Col>
                            <Form.Item label="事件">
                              {getFieldDecorator('event')(
                                <Select placeholder="事件筛选" style={{ width: 90 }}>
                                  {event.map(element => (
                                    <Option key={element.code}>{element.name}</Option>
                                  ))}
                                </Select>,
                              )}
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item label="业务类型">
                              {getFieldDecorator('businessType')(
                                <Select placeholder="业务筛选" style={{ width: 90 }}>
                                  {businessType.map(element => (
                                    <Option key={element.code}>{element.name}</Option>
                                  ))}
                                </Select>,
                              )}
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item label="版本类型">
                              {getFieldDecorator('versionType')(
                                <Select placeholder="版本筛选" style={{ width: 90 }}>
                                  {versionType.map(element => (
                                    <Option key={element.code}>{element.name}</Option>
                                  ))}
                                </Select>,
                              )}
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item label="操作人">
                              {getFieldDecorator('operationBy')(
                                <Select placeholder="操作人筛选" style={{ width: 90 }}>
                                  {operationBy.map(element => {
                                    let x;
                                    if (element.name && element.name !== 'null') {
                                      x = <Option key={element.code}>{element.name}</Option>;
                                    }
                                    return x;
                                  })}
                                </Select>,
                              )}
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item label="时间">
                              {getFieldDecorator('range-picker')(
                                <RangePicker
                                  format="YYYY-MM-DD"
                                  disabledDate={current =>
                                    current && current > moment().endOf('day')
                                  }
                                />,
                              )}
                            </Form.Item>
                          </Col>
                          <Col>
                            <Button type="primary" htmlType="submit">
                              查询
                            </Button>
                            &nbsp;&nbsp;
                            <Button onClick={this.handleFormReset}>重置 </Button>
                          </Col>
                        </Row>
                      </Form>
                    ) : null}
                    <Dynamic {...this.props} formState={formState} />
                  </div>
                </TabPane>
              </Tabs>
            </Card>
          </div>
        </PageHeaderWrapper>
      </div>
    );
  }
}
